<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<style>



    .my-container{
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
    }
    .my-main{

        width: 763px;
        height: 100%;


    }
    .my-title{
        font-weight: bold;
        text-align: center;
        width: 100%;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .my-solid{

        width:100%;
        border:1px solid;

    }
    .my-form {
    display: flex;
    flex-wrap: wrap;
    width: 100%; /* 确保容器宽度填满父元素 */
}

.my-form > div {
    flex: 0 0 33.333%; /* 每项占三分之一宽度 */
    box-sizing: border-box; /* 包含padding和border在宽度内 */
    padding: 8px 12px; /* 添加一些内边距 */
    display: flex;
    align-items: center; /* 垂直居中对齐内容 */
    min-height: 40px; /* 设置最小高度保持对齐 */
}

.my-form > div > span:first-child {
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0; /* 防止标签被压缩 */
}
.image-container {
  display: flex;
  flex-direction: column; /* 垂直排列，每行一个 */
  gap: 16px; /* 图片之间的间距 */
}

.image-item img {
    margin: auto;
    margin-top: 10px;
  max-width: 100%; /* 防止图片超出容器 */
  height: auto; /* 保持原始宽高比 */
  display: block; /* 避免图片下方有间隙 */

    page-break-inside: avoid;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}
.my-table-container{
    border:1px solid;
    width: 100%;
    margin-top: 10px;
}
.my-table-header {
    border: 1px solid black;
    text-align: center;

}

.my-table {
    border: 1px solid #ddd;
    border-top: none; /* 移除顶部边框避免重叠 */
    border-radius: 0 0 4px 4px; /* 如果需要圆角 */
    width: 100%; /* 或者根据需要设置具体的宽度 */
    page-break-inside: auto;
    border-collapse: collapse; /* 使边框合并 */
    font-size: 13px;
}


.my-table th, .my-table td {
    border: 1px solid black; /* 添加边框 */
    text-align: center; /* 内容居中 */
    padding: 8px; /* 添加内边距，使内容不紧贴边框 */
}

.my-table thead th {
    background-color: white; /* 头部背景设置为白色 */
}

/* 自定义列宽度，这里以示例为准，你可以根据需要调整 */
.my-table th:nth-child(1), .my-table td:nth-child(1) {
    width: 13%;
}

.my-table th:nth-child(2), .my-table td:nth-child(2) {
    width: 11%;
}

.my-table th:nth-child(3), .my-table td:nth-child(3) {
    width: 11%;
}

.my-table th:nth-child(4), .my-table td:nth-child(4) {
    width: 40%;
}

.my-table th:nth-child(5), .my-table td:nth-child(5) {
    width: 25%;
}
</style>
<body>

<div id="app" class="my-container">
     <div class="my-main">
        <div class="my-title">
            <img  class="my-image" src="http://hf80jw63710.vicp.fun:55308/profile/reportImage/cb.jpg" alt=" Image" />
            瑁得质量管理系统
        </div>

        <div class="my-solid"></div>
        <div class="my-form">
            <div>
                <span>报表类型：</span>
                <span>{{types}}</span>
            </div>
            <div>
                <span>生成时间：</span>
                <span>{{generateTime}} </span>
            </div>
            <div>
                <span>送样类型：</span>
                <span>{{sampleType}}</span>
            </div>
            <div>
                <span>批次编号：</span>
                <span>{{batchNumber}}</span>
            </div>
            <div>
                <span>产品名称：</span>
                <span>{{productName}}</span>
            </div>
            <div>
                <span>物料编码：</span>
                <span>{{partCode}}</span>
            </div>
        </div>
        <div class="my-solid"></div>
        <div class="image-container">
            <!-- 图片部分替换 -->
            {{images}}
        </div>
        <div class="my-table-container">
            <div class="my-table-header">
            零件检测报告
            </div>

            <table class="my-table">

            <thead>
                <tr>
                    <th v-for="(item,index) in headers" :key="index">{{item}}</th>
                </tr>
            </thead>
                <tbody>
                <!-- 替换表格数据 -->
                {{tableData}}
                </tbody>
            </table>
        </div>


    </div>


</div>

<script>
     const { createApp } = Vue;
     createApp({
            data() {
                return {
                    types: "",
                    generateTime: "",
                    sampleType: "",
                    batchNumber: "",
                    productName: "",
                    partCode: "",
                    headers: ['检测序号', '检查最小值', '检测最大值','实测值','实测结果'],
                    tableData: [],
                    images: []
                };
            }
        }).mount("#app"); // 挂载到 #app



</script>

</body>
</html>